<template>
  <div>
    <el-table :data="permissionTable" :header-cell-style="{'text-align':'center'}" ref="table"
              :cell-style="{'text-align':'center'}">
      <el-table-column prop="id" label="id" width="100"/>
      <el-table-column prop="name" label="权限名" width="100"/>
      <el-table-column prop="value" label="权限值" width="200"/>
      <el-table-column prop="description" label="权限描述" width="200"/>
<!--      <el-table-column prop="created" label="创建时间" width="100"/>-->
<!--      <el-table-column prop="updated" label="更新时间" width="100"/>-->
      <el-table-column prop="sort" label="序号" width="100"/>
<!--      <el-table-column label="操作" width="250">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="primary" icon="el-icon-search" @click="dataDrawerOpen(scope.row)">数据修改</el-button>-->
<!--          <el-popover width="250" placement="right" :ref="'deleteBy'+scope.row.id">-->
<!--            <p style="text-align: center">确认删除：{{ scope.row.username }}？</p>-->
<!--            <p style="text-align: center">(将滑动条移至右侧以解锁“确认”)</p>-->
<!--            <el-slider style="width: 100px;margin: 0 auto" v-model="deleteLine" @change="deletePopoverMaxLine($event)"-->
<!--                       :show-tooltip="false"/>-->
<!--            <div style="text-align: center">-->
<!--              <el-button :disabled="confirmDelete" type="danger" @click="deletePopoverUpdate(scope.row.id)">确认删除-->
<!--              </el-button>-->
<!--            </div>-->
<!--            <el-button style="margin-left: 10px" slot="reference" type="danger" icon="el-icon-delete" @click="deletePopoverOpen">删除</el-button>-->
<!--          </el-popover>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <el-drawer :visible.sync="dataDrawer" :title="'正在修改：'+dataEditForm.nickname" ref="update">
      <el-form :model="dataEditForm" :rules="dataRule" style="max-width: 450px">
        <el-form-item label="权限名" prop="name" label-width="100px">
          <el-input v-model="dataEditForm.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限值" prop="value" label-width="100px">
          <el-input v-model="dataEditForm.value" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="权限描述" prop="description" label-width="100px">
          <el-input v-model="dataEditForm.description" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="序号" prop="sort" label-width="100px">
          <el-input v-model="dataEditForm.sort" autocomplete="off"/>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" style="margin-right: 150px" @click="dataDrawerUpdate">修改</el-button>
          <el-button type="danger" @click="dataDrawerClose">取消</el-button>
        </div>
      </el-form>
    </el-drawer><!--普通数据修改栏-->
  </div>
</template>

<script>

export default {
  name: "jurisdictionList",
  data() {
    return {
      permissionTable: [],
      dataDrawer: false,
      dataEditForm: {
        id: "",
        name: "",
        value: "",
        description: "",
        sort: "",
      },
      dataRule: {
        id: [],
        name: [],
        value: [],
        description: [],
        sort: [],
      },
      confirmDelete: true,
      deleteLine: 0,
    }
  },
  methods: {
    loadPermission() {
      let url = "http://localhost:9999/zx-ams/permission/list"
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          this.permissionTable = jsonResult.data;
        } else {
          this.$message({message: jsonResult.message, type: "error"})
        }
      })
    },//获取权限信息列表
    dataDrawerOpen(data) {
      this.dataEditForm.id = data.id;
      this.dataEditForm.name = data.name;
      this.dataEditForm.value = data.value;
      this.dataEditForm.description = data.description;
      this.dataEditForm.sort = data.sort;
      this.dataDrawer = true;
    },//打开数据修改侧边栏
    dataDrawerUpdate() {
      let url = "http://localhost:9999/zx-ams/permission/update";
      let updateData = this.qs.stringify(this.dataEditForm)
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).post(url, updateData).then((response) => {
        if (response.data.state === 200) {
          this.$message({message: "数据已修改，正在刷新页面", type: "success"});
          this.loadPermission();
        } else {
          this.$message({message: response.data.message, type: "error"})
        }
      })
      this.dataDrawerClose();
    },//确认修改窗口内容并触发closingDrawer
    dataDrawerClose() {
      this.$refs.update.closeDrawer();
    },//关闭修改侧边栏
    deletePopoverOpen() {
      this.deleteLine = 0;
      this.confirmDelete = true;
    },//打开Popover组件，delete
    deletePopoverMaxLine(index) {
      if (index !== 100) {
        this.deleteLine = 0;
      }
      this.confirmDelete = index !== 100;
    },//检查删除确认条是否拉到右侧
    deletePopoverUpdate(id) {
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).post("http://localhost:9999/zx-ams/permission/delete", this.qs.stringify({"id": id})).then((response) => {
        if (response.data.state === 200) {
          this.$message({message: "删除完毕，正在刷新页面", type: "success"});
          this.loadPermission();
        } else {
          this.$message({message: response.data.message, type: "error"})
        }
      })
      this.$refs[`deleteBy` + id].doClose();
    },//根据id执行删除并关闭对应的popover删除窗口
  },
  mounted() {
    this.loadPermission();
  }
}
</script>

<style scoped>

</style>